<div>
    <h3>Add New User</h3>
    <form id="form-add-user" method="post">
        <table class="table">
            <tbody>
                
                <tr>
                    <td colspan="3"><label class="font15">Name</label></td>
                </tr>
                
                <tr>
                    <td>
                        <input type="text" class="span3" name="last-name" placeholder="Last name" />
                    </td>
                    <td>
                        <input type="text" class="span3" name="first-name" placeholder="First name" />
                    </td>
                    <td>
                        <input type="text" class="span3" name="middle-name" placeholder="Middle name" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" class="span2" name="email" placeholder="Email" />
                        &nbsp;&nbsp;@&nbsp;&nbsp;
                        <select name="provider">
                            <option value="yahoo.com">yahoo.com</option>
                            <option value="yahoo.com.ph">yahoo.com.ph</option>
                            <option value="gmail.com">gmail.com</option>
                            <option value="gmail.com.ph">gmail.com.ph</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" name="user-name" placeholder="User name" />
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>Gender: <br/>
                        <select name="gender">
                            <option value="Male" >Male</option>
                            <option value="Female" >Female</option>
                        </select>
                    </td>
                    <td colspan="2">
                        Address:<br />
                        <input type="text" class="span5" name="address" />
                    </td>
                </tr>
                
                <tr>
                    <td>
                        Department<br />
                        <select class="span3" name="department" >
                            <option value="Mayor's Office" >Mayor's Office</option>
                            <option>Treasurer's Office</option>
                            <option>Human Resources</option>
                        </select>
                    </td>
                    <td>
                        Position<br />
                        <select class="span3" name="position" >
                            <option value="???">???</option>
                            <option>???</option>
                            <option>???</option>
                        </select>
                    </td>
                </tr>
                
                <tr>
                    <td colspan="3">Authentication Level
                        <br />
                        <select class="span3" name="auth-level" >
                            <option value="level1" >Level1</option>
                            <option value="level2" >Level2</option>
                            <option value="level3" >Level3</option>
                        </select>
                    </td>
                    
                </tr>
                
                <tr>
                    <td colspan="3">
                        <input type="button" id="btn-add-user" value="ADD USER" class="btn btn-green" />
                        <input type="reset" value="CANCEL" class="btn btn-blue" />
                    </td>
                </tr>
                
            </tbody>
        </table>
    </form>
    <div id="message"></div>
</div>
<script>
    $(document).ready(function(){
        $('#btn-add-user').click(function(){
            $.post('../resources/actions/act-add-user.php',$('#form-add-user').serialize(), function(data) {
                $('#message').html(data).fadeIn('normal');
            }); 
        });
       
    });
</script>